<%--
  Created by IntelliJ IDEA.
  User: 路♥克
  Date: 2017/12/5
  Time: 2:31
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <base href="${pageContext.request.contextPath}/webuser/"/>
    <meta charset="UTF-8">
    <title>Document</title>
    <jsp:include page="elments_views/js.jsp"/>
    <link rel="stylesheet" type="text/css" href="frame/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="frame/bootstrap/css/button.css">
    <!-- 	<link rel="stylesheet" type="text/css" href="frame/bootstrap/css/bootstrap-theme.min.css"> -->
    <link rel="stylesheet" type="text/css" href="frame/css/layout.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script type="text/javascript" src="frame/myfocus/js/myfocus-2.0.1.min.js"></script>
    <style type="text/css">
        .panel{margin-bottom: 0px;}
        .panel .panel-heading{border-radius: 0px;background: white;margin:0px;color: black;font-weight: bolder;font-size: 16px;padding-bottom: 0px;}
        .panel .panel-heading p.first-menu{border-left: 5px solid red;padding-left: 15px;}
        .panel .list-group li{border: none;padding-left: 50px;}
        .panel .list-group li a{color: black;}
        .panel .list-group li.active{background: #f9f9f9;font-weight: bold;}
        .panel .panel-heading p.date-source{font-weight:normal;color: #cfcfcf;}
    </style>
</head>
<body>
<jsp:include page="elments_views/header.jsp"/>
<div class="container" style="margin-top: 120px;">
    <div class="row">
        <div class="col-md-3">

            <div class="panel" >
                <div class="panel-heading">
                    <p class="first-menu">个人中心</p>
                </div>
                <ul class="list-group">

                    <li class="list-group-item">
                        <p><a href="#">个人资料</a></p></li>
                    <li class="list-group-item">
                        <p><a href="#">安全设置</a></p></li>
                </ul>
            </div>

            <div class="panel" >
                <div class="panel-heading">
                    <p class="first-menu">服务与支持</p>
                </div>
                <ul class="list-group">

                    <li class="list-group-item active">
                        <p><a href="#">关于我们</a></p></li>
                    <li class="list-group-item">
                        <p><a href="#">优质服务</a></p></li>
                    <li class="list-group-item">
                        <p><a href="#">联系方式</a></p></li>
                </ul>
            </div>

            <div class="panel" >
                <div class="panel-heading">
                    <p class="first-menu">新闻中心</p>
                </div>
                <ul class="list-group">

                    <li class="list-group-item active">
                        <p><a href="#" >最新资讯</a></p></li>
                    <li class="list-group-item">
                        <p><a href="#">热门动态</a></p></li>

                </ul>
            </div>
        </div>
        <div class="col-md-9">
            <div class="panel">
                <div class="panel-heading">
                    <h3>最新资讯</h3>

                    <hr>
                </div>
                <div class="panel-body">
                    <div class="media">
                        <div class="media-left">
                            <a href="#">
                                <img class="media-object" src="images/4.jpg" width="64" height="64" alt="...">
                            </a>
                        </div>
                        <div class="media-body">
                            <h4 class="media-heading">Media heading</h4>
                            Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。目前,Bootstrap最新版本为3.0 。...
                        </div>
                    </div>
                    <hr>
                    <div class="media">
                        <div class="media-left">
                            <a href="#">
                                <img class="media-object" src="images/4.jpg" width="64" height="64" alt="...">
                            </a>
                        </div>
                        <div class="media-body">
                            <h4 class="media-heading">Media heading</h4>
                            Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。目前,Bootstrap最新版本为3.0 。...
                        </div>
                    </div>
                    <hr>
                    <div class="media">
                        <div class="media-left">
                            <a href="#">
                                <img class="media-object" src="images/4.jpg" width="64" height="64" alt="...">
                            </a>
                        </div>
                        <div class="media-body">
                            <h4 class="media-heading">Media heading</h4>
                            Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。目前,Bootstrap最新版本为3.0 。...
                        </div>
                    </div>
                    <hr>
                    <div class="media">
                        <div class="media-left">
                            <a href="#">
                                <img class="media-object" src="images/4.jpg" width="64" height="64" alt="...">
                            </a>
                        </div>
                        <div class="media-body">
                            <h4 class="media-heading">Media heading</h4>
                            Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。目前,Bootstrap最新版本为3.0 。...
                        </div>
                    </div>
                    <hr>
                    <div class="media">
                        <div class="media-left">
                            <a href="#">
                                <img class="media-object" src="images/4.jpg" width="64" height="64" alt="...">
                            </a>
                        </div>
                        <div class="media-body">
                            <h4 class="media-heading">Media heading</h4>
                            Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。目前,Bootstrap最新版本为3.0 。...
                        </div>
                    </div>
                    <hr>
                    <div class="media">
                        <div class="media-left">
                            <a href="#">
                                <img class="media-object" src="images/4.jpg" width="64" height="64" alt="...">
                            </a>
                        </div>
                        <div class="media-body">
                            <h4 class="media-heading">Media heading</h4>
                            Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。目前,Bootstrap最新版本为3.0 。...
                        </div>
                    </div>
                    <hr>
                    <div class="media">
                        <div class="media-left">
                            <a href="#">
                                <img class="media-object" src="images/4.jpg" width="64" height="64" alt="...">
                            </a>
                        </div>
                        <div class="media-body">
                            <h4 class="media-heading">Media heading</h4>
                            Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。目前,Bootstrap最新版本为3.0 。...
                        </div>
                    </div>
                    <hr>
                </div>
                <div class="text-center" style="background: white;">
                    <nav aria-label="Page navigation">
                        <ul class="pagination">
                            <li>
                                <a href="#" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                            <li><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li><a href="#">5</a></li>
                            <li>
                                <a href="#" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</div>
<jsp:include page="elments_views/footer.jsp"/>
</body>
</html>
